<template>
  <!-- 地址输入框查询组件 -->
  <div class="address-input-wrap">
    <el-popover
      trigger="manual"
      popper-class="address-input-popover"
      :visible-arrow="false"
      v-model="showResultPannel">
      <!-- 查询结果面板 -->
      <div class="address-search-pannel" :style="{'width': elWidth + 'px'}" @click="inputFocus">
        <div class="loading" v-if="loading">
          <i class="el-icon-loading"></i>
        </div>
        <template v-else>
          <el-scrollbar wrap-class="address-search-result-scroll" v-if="list.length">
            <div
              class="result-item no-height"
              :class="{'actived': data.id === curId}"
              v-for="(data, index) in list"
              :key="index"
              @click.stop="handleAddressClick(data)"
            >
              <div class="name">{{data.regionName}}</div>
              <div class="info-name">{{data.fullRegionName}}</div>
            </div>
          </el-scrollbar>
          <div class="empty" v-else>暂无数据</div>
        </template>
      </div>
      <!-- 地址搜索 -->
      <el-input
        ref="searchInput"
        slot="reference"
        @focus="handleInputFocus"
        @input="search"
        @blur="handleInputBlur"
        v-model="keyword"
        clearable
        class="page-inpt"
        prefix-icon="iconfont iconsousuo"
        placeholder="请输入组织名称"
      />
    </el-popover>
  </div>
</template>

<script>
// import {searchOrg} from '@/services/model/address'

export default {
  data() {
    return {
      keyword: '',
      // 展示结果面板
      showResultPannel: false,
      // 展示结果面板宽度
      elWidth: 0,
      // 查询结果
      list: [],
      // 选中地址ID
      curId: '',
      // 选中机构名称
      curOrgName: '',
      // 查询数据loading状态
      loading: false
    }
  },
  mounted() {
    this.elWidth = this.$el.offsetWidth
  },
  methods: {
    /**
     * 搜索
     */
    search() {
      this.list = []
      this.curId = ''
      this.curOrgName = ''
      if (this.keyword) {
        this.loading = true
        this.showResultPannel = true
        this.searchOrg()
      } else {
        this.showResultPannel = false
      }
    },
    /**
     * 区域搜索
     */
    async searchOrg() {
      let data = await searchOrg({
        current: 0,
        regionName: this.keyword,
        size: 20
      })
      this.list = data.data.records
      this.loading = false
    },
    /**
     * 输入框失焦
     */
    handleInputBlur() {
      this.showResultPannel = false
    },
    /**
     * 输入框聚焦
     */
    handleInputFocus() {
      if (this.keyword) {
        this.showResultPannel = true
      }
    },
    /**
     * 地址点击回调
     */
    handleAddressClick(data) {
      this.curId = data.id
      this.curOrgName = data.regionName
      this.keyword = this.curOrgName
      this.showResultPannel = false
      this.list = [data]
      this.$emit('selectOrg', data)
    },
    /**
     * 手动触发输入框聚焦，保证点击面板输入框聚焦
     */
    inputFocus() {
      this.$refs.searchInput.focus()
    }
  }
}
</script>

<style lang="less">


  .address-input-popover {
    margin-top: 0;
    padding: 0;
    box-shadow: 0px 2px 10px #ffffff;
    backdrop-filter: blur(6px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 8px;

    .address-search-pannel {
      padding-top: 10px;
      background-color: #ffffff;

      .loading {
        padding-bottom: 10px;
        text-align: center;
      }

      .address-search-result-scroll {
        max-height: 432px;

        .result-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-bottom: 2px;
          padding: 14px 16px;
          // height: 72px;
          cursor: pointer;

          &:last-child {
            margin-bottom: 0;
          }

          &:hover,
          &.actived {
            background-color: #21294A;
          }

          &.no-height {
            height: auto;
          }

          .name {
            font-size: 14px;
            line-height: 20px;
            color: #21294A;
          }

          .info-name {
            margin-top: 6px;
            font-size: 12px;
            line-height: 18px;
            color: #8A8E9C;
          }
        }
      }

      .empty {
        padding: 16px;
        text-align: center;
      }
    }
  }

</style>
